<template>
    <el-row>
        <el-col :span="5">
            <div class="grid-content bg-purple">&emsp;</div>
        </el-col>
        <el-col :span="14">
            <div class="grid-content bg-purple-light">
                <template>
                    <el-table :data="overDueList" type=index border style="width: 100%">
                        <el-table-column prop="overdueId" label="还款编号">
                        </el-table-column>

                        <el-table-column prop="overduePrincipal" label="逾期本金">
                        </el-table-column>
                        <el-table-column prop="overdueInterest" label="逾期利息">
                        </el-table-column>
                        <el-table-column prop="overdueInterestRate" label="逾期利率">
                        </el-table-column>
                        <el-table-column prop="totalOverdueMoney" label="逾期总金额">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" size="small"
                                    @click="loadOverDueInfo(scope.row.overdueId)">逾期还款</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </div>
            <!-- 逾期还款界面 -->
            <el-dialog title="逾期还款" :visible.sync="dialog.FormVisible" width="40%">
                <el-form :model="overDueInfo" size="mini" label-width="120px" class="el el-align-left">
                    <el-form-item label="还款编号 :">
                        <span class="left">{{ overDueInfo.overdueId }}</span>
                    </el-form-item>
                    <el-form-item label="逾期本金 :">
                        <span class="left">{{ overDueInfo.overduePrincipal }}</span>
                    </el-form-item>
                    <el-form-item label="逾期利息 :">
                        <span class="left">{{ overDueInfo.overdueInterest }}</span>
                    </el-form-item>
                    <el-form-item label="逾期利率 :">
                        <span class="left">{{ overDueInfo.backup2 }}</span>
                    </el-form-item>
                    <el-form-item label="逾期总金额 :">
                        <span class="left">{{ overDueInfo.totalOverdueMoney }}</span>
                    </el-form-item>
                    <el-form-item label="还款方式 :">
                        <el-radio-group v-model="checked">
                            <el-radio border v-for="item in payTypeList" :key="item.payTypeId" :label="item.payTypeName"
                                size="mini" display="block"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialog.FormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="feeback">确认还款
                    </el-button>
                </div>
            </el-dialog>
        </el-col>
        <el-col :span="5">
            <div class="grid-content bg-purple">&emsp;</div>
        </el-col>
    </el-row>
</template>

<script>
export default {
    data() {
        return {           
            checked: "",//选中的还款方式
            overDueList: {
                overdueId:0,
                overduePrincipal:0,
                overdueInterest:0,
                
            },
            overDueRecordDto: {//传给后端的值
                userId: 1,//模拟传参
                overdueId: 1,
                payTypeId: 1,
                repayReocrdId: 1,
            },
            overDueInfo: {
                overdueId: 1,
                overduePrincipal: 1,
                overdueInterest: 1,
                backup2: 1,
                totalOverdueMoney: 1,
            },
            payTypeList: [],//支付方式
            dialog: {
                FormVisible: false,
            },
            repayRecordId:0
        };
    },
    methods: {
        open1() {
            this.$notify({
                title: '提示',
                message: '支付完成后请刷新本页面',
                duration: 0,
                type: 'success'
            });
        },
        loadOverDueList() {
            this.$axios.post("/overDue/selOverDue", this.overDueRecordDto).then((res) => {
                if (res.data.code == 200) {
                    this.overDueList = res.data.data.overDueList;
                    this.overDueList.overdueInterestRate = this.overDueList.overdueInterestRate * 100 + "%"; //给利率加百分号
                } else {
                    this.$message.error("操作错误");
                }
            });
        },
        loadOverDueInfo(overdueId) {
            this.dialog.FormVisible = true;
            this.overDueRecordDto.overdueId = overdueId;
            this.$axios.post("/overDue/selOne", this.overDueRecordDto).then((res) => {
                if (res.data.code == 200) {
                    this.overDueInfo = res.data.data.overDueInfo;
                    this.payTypeList = res.data.data.payTypeList;
                    this.repayRecordId = res.data.data.repayRecordId;
                    //alert(this.repayRecordId);                   
                } else {
                    this.$message.error("操作错误")
                }
            })

        },
        //确认还款调用的方法
        feeback() {
            this.overDueRecordDto.repayReocrdId = this.repayRecordId;
            for (let i = 0; i < this.payTypeList.length; i++) {
                if (this.checked == this.payTypeList[i].payTypeName) {
                    this.overDueRecordDto.payTypeId = this.payTypeList[i].payTypeId;
                }
            };
            //调用支付方法
            if (this.overDueRecordDto.payTypeId == 2) {
                window.open("http://localhost:8080/alipay/pay?repayReocrdId=" + this.overDueRecordDto.repayReocrdId + "&payTypeId=" + this.overDueRecordDto.payTypeId);
            } else {
                this.$axios.post("/overDue/overDuePay", this.overDueRecordDto)
                // .then((res)=>{
                //     if(res.data.code==200){
                //         this.loadOverDueList();
                //     }
                // })
            }
            this.dialog.FormVisible = false;
            this.loadOverDueList();
            this.open1();
        },
    },
    mounted() {
        this.overDueRecordDto.userId=this.$route.params.uid;
        this.loadOverDueList();
    },
};
</script>